@charset "utf-8";
.mj-btn {display:inline-block;border:1px solid #dcdee2;background:#fff;color:var(--balck);height:32px;line-height:32px;border-radius:3px;cursor:pointer;padding:0 15px;transition:color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;position: relative;outline: none;vertical-align: middle;white-space:nowrap;}
.mj-btn + .mj-btn:not([block]) {margin-left: 8px;}
.mj-btn:hover {color:var(--primary);border-color:var(--primary);}
.mj-btn-primary {background:var(--primary);color:var(--white);border-color:var(--primary);}
.mj-btn-primary:hover {background:var(--primaryhover);border-color:var(--primaryhover);color:#fff;}
.mj-btn-primary[hollow] {background:var(--white);border-color:var(--primary);color:var(--primary);}
.mj-btn-primary[hollow]:hover {border-color:var(--primaryhover);color:var(--primaryhover);}
.mj-btn-success {background:var(--green);color:var(--white);border-color:var(--green);}
.mj-btn-success:hover {background:var(--greenhover);border-color:var(--greenhover);color:#fff;}
.mj-btn-success[hollow] {background:var(--white);border-color:var(--green);color:var(--green);}
.mj-btn-success[hollow]:hover {border-color:var(--greenhover);color:var(--greenhover);}
.mj-btn-warning {background:var(--orange);color:var(--white);border-color:var(-.mj-is-disabled, .mj-is-disabled:hover-orange);}
.mj-btn-warning:hover {background:var(--orangehover);border-color:var(--orangehover);color:#fff;}
.mj-btn-warning[hollow] {background:var(--white);border-color:var(--orange);color:var(--orange);}
.mj-btn-warning[hollow]:hover {border-color:var(--orangehover);color:var(--orangehover);}
.mj-btn-error {background:var(--red);color:var(--white);border-color:var(--red);}
.mj-btn-error:hover {background:var(--redhover);border-color:var(--redhover);color:#fff;}
.mj-btn-error[hollow] {background:var(--white);border-color:var(--red);color:var(--red);}
.mj-btn-error[hollow]:hover {border-color:var(--redhover);color:var(--redhover);}
.mj-btn-info {background:var(--royalblue);color:var(--white);border-color:var(--royalblue);}
.mj-btn-info:hover {background:var(--royalbluehover);border-color:var(--royalbluehover);color:#fff;}
.mj-btn-info[hollow] {background:var(--white);border-color:var(--royalblue);color:var(--royalblue);}
.mj-btn-info[hollow]:hover {border-color:var(--royalbluehover);color:var(--royalbluehover);}
.mj-btn-normal {background:var(--gray9);color:var(--white);border-color:var(--gray9);}
.mj-btn-normal:hover {background:var(--gray10);border-color:var(--gray10);color:#fff;}
.mj-btn-normal[hollow] {background:var(--white);border-color:var(--gray9);color:var(--gray9);}
.mj-btn-normal[hollow]:hover {border-color:var(--gray10);color:var(--gray10);}
.mj-btn-disabled,.mj-btn-disabled:hover {background:var(--disabled);color:var(--white);border-color:var(--disabled);cursor:not-allowed;}
.mj-btn-text,.mj-btn-text:hover {background:transparent;color:var(--balck);border-color:transparent;}
.mj-btn-text:focus {color:var(--link);box-shadow: 0 0 0 1px rgb(45 140 240 / 20%)}
.mj-btn[size='large'] {height:40px;line-height:40px;font-size:16px;padding:0 18px;}
.mj-btn[size='large'] i {font-size:20px;}
.mj-btn[size='small'] {height:24px;line-height:24px;font-size:12px;padding:0 8px;}
.mj-btn[size='small'] i {font-size:13px;}
.mj-btn i {vertical-align: text-bottom;line-height:1;}
.mj-btn i + span {margin-left: 3px;}
.mj-btn[shape="circle"] {border-radius: 50%;width:32px;padding:0;}
.mj-btn[shape="circle"][size='large'] {border-radius: 50%;width:40px;padding:0;}
.mj-btn[shape="circle"][size='small'] {border-radius: 50%;width:24px;padding:0;}
.mj-btn[shape="border"] {border-radius: 10em;}
.mj-btn[block] {width:100%;}
.mj-btn[block] + .mj-btn[block] {margin-top: 15px;}
.mj-btn-loading {pointer-events: none;opacity: .6;}
.mj-is-disabled{background:var(--disabled) !important;color:var(--white) !important;border-color:var(--disabled) !important;cursor:not-allowed;}
.mj-is-disabled:hover {background:var(--disabled);color:var(--white);border-color:var(--disabled);cursor:not-allowed;}

/*按钮组*/
.mj-btn-group {font-size:0;}
.mj-btn-group > .mj-btn {margin-left:0!important;vertical-align: middle;margin-right:-1px;}
.mj-btn-group > .mj-btn:not(:first-child):not(:last-child) {border-radius:0;}
.mj-btn-group > .mj-btn:first-child {border-radius:3px 0 0 3px;}
.mj-btn-group > .mj-btn:last-child {border-radius:0 3px 3px 0;}
.mj-btn-group[size="large"] > .mj-btn {height:40px;line-height:40px;font-size:16px;padding:0 18px;}
.mj-btn-group[size="large"] > .mj-btn  i {font-size:20px;}
.mj-btn-group[size="small"] > .mj-btn {height:24px;line-height:24px;font-size:12px;padding:0 8px;}
.mj-btn-group[size="small"] > .mj-btn  i {font-size:13px;}
.mj-btn-group[shape="circle"] > .mj-btn:first-child {border-radius:10em 0 0 10em;}
.mj-btn-group[shape="circle"] > .mj-btn:last-child {border-radius:0 10em 10em 0;}

/*loading*/
.mj-btn-loading .loading {width:14px;height:14px;border:1.5px solid #fff;border-top-color:transparent;border-right-color:transparent;border-radius:50%;display: inline-block;box-sizing: border-box;margin-right: 3px;}
.mj-load-loop {
    animation: ani-load-loop 1s linear infinite
}
.mj-btn:not([type]) .loading {border:1.5px solid var(--black);border-top-color:transparent;border-right-color:transparent}
@keyframes ani-load-loop {
    0% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(180deg)
    }
    to {
        transform: rotate(1turn)
    }
}